<template>
	<!-- 注册 -->
	<view class="wrap">
		<view class="logo-box">
			<text class="title">欢迎注册</text>
			<!-- <image src="../../../static/img/logo.png"></image> -->
		</view>
		<view class="main">
			<view :class="textPhone?'item':'item-error'">
				<u-input placeholder="请输入手机号" v-model="fromList.phonenumber" @blur="handleBlur" type="text"
					placeholder-style="color:#8C9299;" />

			</view>
			<view class="item">
				<u-input placeholder="请设置用户名" v-model="fromList.username" type="text"
					placeholder-style="color:#8C9299;" />

			</view>

			<view class="item">

				<u-input v-model="fromList.password" type="password" placeholder='请设置登录密码'
					placeholder-style="color:#8C9299;" />

			</view>
			<view class="item">

				<u-input v-model="fromList.pasAggin" type="password" placeholder='请确认密码'
					placeholder-style="color:#8C9299;" @blur='handlePas' />
				<p class="error-tip" v-if="textPasAgin==false">两次密码不一致</p>
			</view>

			<view class="radio-group">
				<view class="radio-box" v-for="item in radioArr" :key="item.value" @click="doSelect($event)"
					:data-value='item.value'>
					<image :src="fromList.identity==item.value?item.selectImg : item.img"></image>
					<p>{{item.standing}}</p>
				</view>
			</view>

		</view>
		<view class="footer">
			<button @click="doRegister">注册</button>

		</view>

		<view class='check'>
			<p class="tip-words">身份选择后不可更改，如需更改联系管理员</p>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromList: {

					phonenumber: null,
					username: null,
					password: null,
					pasAggin: null,
					identity: 1,


				},

				radioArr: [{
						value: 1,
						standing: '现场操作人员',
						img: '../../../static/img/not-select-icon.png',
						selectImg: '../../../static/img/select-icon.png'
					},
					{
						value: 2,
						standing: '机修人员',
						img: '../../../static/img/not-select-icon.png',
						selectImg: '../../../static/img/select-icon.png'
					}
				],
				//校验电话号码
				textPhone: true,
				//校验密码
				textPasAgin: true,
				isFinish: false
			};
		},

		methods: {

			//注册
			doRegister() {
				if (this.isFinish) {
					// console.log(this.isFinish)
					this.$u.api.getRegister({
						identity: this.fromList.identity,
						name: this.fromList.username,
						phoneNumber: this.fromList.phonenumber,
						password: this.fromList.pasAggin
					}).then(res => {
						// console.log(res.data, "999")
						if (res.code == 200) {
							uni.showToast({
								title: '您已注册成功！三秒后跳转到登录页',
								duration: 3000,
								icon: 'none'
							});
							setTimeout(() => {
								//跳转到登录页
								uni.navigateTo({
									url: "/pages/scene/login/login"
								})
							}, 3000)
						}
					})
				} else {
					uni.showToast({
						title: '信息有误或未填',
						duration: 2000,
						icon: 'error'
					});
				}

			},
			doSelect(e) {
				this.fromList.identity = e.currentTarget.dataset.value

			},
			//校验电话号码
			handleBlur() {

				const regex = /^1[3456789]\d{9}$/;
				if (!regex.test(this.fromList.phonenumber)) {
					this.textPhone = false
				} else {
					this.textPhone = true
				}
			},
			//校验二次密码
			handlePas() {
				if (this.fromList.pasAggin != this.fromList.password) {
					this.textPasAgin = false
				} else {
					this.textPasAgin = true
					this.doFinish()
					// console.log(this.isFinish)
				}
			},
			//校验是不是每个都填了
			doFinish() {

				if (this.fromList.password != null &&
					this.fromList.pasAggin != null &&
					this.fromList.username != null &&
					this.fromList.phonenumber != null &&
					this.textPasAgin &&
					this.textPhone
				) {
					this.isFinish = true
					// console.log(this.isFinish)

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input__input.data-v-460c1d26 {
		padding-left: 20rpx !important;

	}

	.wrap {
		height: 100vh;
		padding: 80rpx;
		position: relative;
		box-sizing: border-box;

		// overflow: hidden;
		.title {

			// position: absolute;
			// top:80rpx;
			.title-t {
				color: #1A1A1A;
				font-size: 40rpx;
				// font-weight: 700;
				text-align: center;
			}

		}

		.logo-box {
			margin: 40rpx auto 26rpx auto;
			text-align: center;

			.title {
				width: 300rpx;
				height: 84rpx;
				font-size: 60rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #335728;
				line-height: 70rpx;


			}

			image {
				width: 480rpx;
				height: 138rpx;
				margin: 66rpx auto 30rpx auto;
			}
		}

	}

	.error-tip {
		color: red;
		margin-top: 15rpx;
	}

	.main {

		//验证失败样式
		.item-error {
			width: 615rpx !important;
			height: 88rpx !important;
			// background: #F8FAF5;
			border-radius: 20rpx !important;
			border: 1rpx solid red !important;
			margin: 48rpx auto !important;
		}

		.item {
			width: 615rpx !important;
			height: 88rpx !important;
			// background: #F8FAF5;
			border-radius: 20rpx !important;
			border: 1rpx solid #578249 !important;
			margin: 48rpx auto !important;



			// box-sizing: border-box;
			// flex: 0.8 !important;
		}

		.radio-group {
			width: 590rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;

			.radio-box {
				display: flex;
				align-items: center;

				p {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #2F3133;
					margin-left: 24rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.footer {
		margin-top: 60rpx;

		button {
			width: 590rpx;
			height: 88rpx;
			background: #99D945;
			border-radius: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #335728;
			margin: 0rpx auto 50rpx auto;
		}

	}

	.check {
		position: fixed;
		bottom: 38rpx;

		left: 80rpx;
		right: 80rpx;
		// padding-bottom: 38rpx;
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;


	}

	.tip-words {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #606166;
		text-align: center;
		// margin-bottom: 80rpx;

	}
</style>